<template>
  <van-nav-bar title="英雄" left-text="返回" left-arrow @click-left="handleToBack" fixed placeholder />
  <div class="u-font-14">
    <van-sticky :offset-top="46">
      <van-row class="u-p-t-10 u-p-b-10" style="background-color: #ffffff;">
        <van-col span="8">英雄</van-col>
        <van-col span="4">场次</van-col>
        <van-col span="6">胜率</van-col>
        <van-col span="6">分数</van-col>
      </van-row>
    </van-sticky>
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-row
        class="u-m-t-6 u-p-b-6 u-border-bottom"
        v-for="item in heroList"
        :key="item.hero_id"
        align="center"
        justify="space-between"
      >
        <van-col span="8">
          <van-row class="u-line-1 u-p-l-10" align="center" gutter="10" justify="space-between">
            <van-col span="6">
              <van-image
                lazy-load
                height="32"
                width="32"
                fit="cover"
                position="left"
                round
                :src="getHeroAvatar(item.hero_id)"
              ></van-image>
            </van-col>
            <van-col span="18">
              <div class="u-line-1 u-text-left">{{ getHeroName(item.hero_id) }}</div>
            </van-col>
          </van-row>
        </van-col>
        <van-col span="4">
          <div>{{ item.with_games }}</div>
        </van-col>
        <van-col span="6">
          <div class="u-p-r-20 u-p-l-20">
            <div
              class="u-m-b-4"
            >{{ item.with_games ? (item.with_win / item.with_games * 100).toFixed(1) : 0 }}%</div>
            <van-progress
              :percentage="item.with_games ? (item.with_win / item.with_games * 100) : 0"
              :show-pivot="false"
            />
          </div>
        </van-col>
        <van-col span="6">
          <div class="u-p-r-20 u-p-l-20">
            <div>{{ item.score ? Math.floor(item.score) : 0 }}</div>
            <van-progress
              :percentage="item.score ? getProgress(item.score, 'score') : 0"
              :show-pivot="false"
            />
          </div>
        </van-col>
      </van-row>
    </van-list>
  </div>
</template>
<script setup>
import { ref } from '@vue/runtime-core'
import { useRoute, useRouter } from 'vue-router'
import { getPlayerHeros, getPlayerRankings } from '@/api/player'
import { getHeroAvatar, getHeroName } from '@/utils/dotaHelper'
import _ from 'lodash'

const router = useRouter()
const handleToBack = () => {
  router.back()
}

const heroList = ref([])
const route = useRoute()
const loading = ref(false);
const finished = ref(false);

const onLoad = () => {
  Promise.all([
    getPlayerHeros(route.params.account_id),
    getPlayerRankings(route.params.account_id)
  ]).then(resList => {
    resList[0].map(item => {
      item.hero_id = Number(item.hero_id)
    })
    const list = _.concat(resList[0], ...resList[1])
    const heroMap = _.groupBy(list, 'hero_id')
    for (let key of Object.keys(heroMap)) {
      heroList.value.push(_.assign(heroMap[key][0], heroMap[key][1]))
    }
    heroList.value.sort((a, b) => {
      return b.games - a.games
    })
    loading.value = false;
    finished.value = true;
  })
};

const getMaxValue = key => {
  let max = 0
  heroList.value.forEach(item => {
    if (item[key] > max) {
      max = item[key]
    }
  })
  return max
}
const getProgress = (value, key) => {
  const maxValue = getMaxValue(key)
  return (value / maxValue) * 100
}
</script>